﻿<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>果缘</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="stylesheet" href="assets/css/amazeui.css">
		<link rel="stylesheet" href="assets/css/app.css">
		<link rel="stylesheet" href="assets/css/custom.css">
		<style type="text/css">
			#content {
				margin-left: 90px;
			}
		</style>
	</head>
	<body>
		<!-- Header -->
		<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
			<h1 class="am-header-title">

			<a href="#title-link" class="">某水果店</a>

		</h1>
			<div class="am-header-left am-header-nav">
				<a href="index.html" class=""> <i class="am-header-icon am-icon-chevron-left"></i>
				</a>
			</div>
			<div class="am-header-right am-header-nav">
				<a href="#right-link" class=""> <i class="am-header-icon am-icon-search"></i>
				</a>
			</div>
		</header>
		<!--side menu-->
		<nav id="menu">
			<ul>
				<li>
					<a href="#item1" class="current">1F</a>
				</li>
				<li>
					<a href="#item2">2F</a>
				</li>
				<li>
					<a href="#item3">3F</a>
				</li>
				<li>
					<a href="#item4">4F</a>
				</li>
				<li>
					<a href="#item5">5F</a>
				</li>
			</ul>
		</nav>
		<!--product list-->
		<div id="content" data-am-widget="list_news" class="am-list-news am-list-news-default">
			<div id="item1" class="item">
				<!--list title-->
				<h2>1F</h2>
				<!--list content-->
				<ul class="am-list">
					<!--缩略图在标题左边-->
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="#">
								<img src="assets/i/examples/fruits/fruit1.jpeg" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="item2" class="item">
				<!--list title-->
				<h2>2F</h2>
				<!--list content-->
				<ul class="am-list">
					<!--缩略图在标题左边-->
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="#">
								<img src="assets/i/examples/fruits/fruit1.jpeg" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
				</ul>

			</div>
			<div id="item3" class="item">
				<!--list title-->
				<h2>3F</h2>
				<!--list content-->
				<ul class="am-list">
					<!--缩略图在标题左边-->
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="#">
								<img src="assets/i/examples/fruits/fruit1.jpeg" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="item4" class="item">
				<!--list title-->
				<h2>4F</h2>
				<!--list content-->
				<ul class="am-list">
					<!--缩略图在标题左边-->
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="#">
								<img src="assets/i/examples/fruits/fruit1.jpeg" alt="我很囧，你保重....晒晒旅行中的那些囧！" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
				</ul>

			</div>
			<div id="item5" class="item">
				<!--list title-->
				<h2>5F</h2>
				<!--list content-->
				<ul class="am-list">
					<!--缩略图在标题左边-->
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="#">
								<img src="assets/i/examples/fruits/fruit1.jpeg" alt="" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit3.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
					<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left">
						<div class="am-u-sm-4 am-list-thumb">
							<a href="###">
								<img src="assets/i/examples/fruits/fruit2.jpg" alt="商店图片" />
							</a>
						</div>
						<div class="am-u-sm-8 am-list-main">
							<h3 class="am-list-item-hd">

							<a href="#">商品名称</a>

						</h3>

							<div class="am-list-item-text">商品简介</div>
							<s id="">￥10/kg</s><span class="fruit_green" id="">￥10/kg</span>
							<span class="fruit_red_tip">销量：100000</span>
							<div class="am-vertical-align-bottom am-fr">
								<span class="am-icon-minus-circle am-icon-md fruit_green"></span>
								<span class="fruit_green">1</span>
								<span class="am-icon-plus-circle am-icon-md fruit_green"></span>
							</div>
						</div>
					</li>
				</ul>

			</div>
		</div>
		<!-- Footer -->
		<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default" id="">
			<div class="shopcar_bar">
				<div class="am-dropdown am-dropdown-up" data-am-dropdown>
					<button class="am-btn am-btn-success am-dropdown-toggle am-btn-sm am-fl" data-am-dropdown-toggle>￥50&nbsp;<span class="am-icon-caret-up"></span>
					</button>
					<ul class="am-dropdown-content am-list am-list-static">
						<li class="am-cf">

								<div class="am-list-item-text am-fl">
									<span id="">商品名称</span>
									<br/>
									<span class="fruit_green" id="">￥10/kg</span>
								</div>
								<div class="am-fr">
									<i class="am-icon-trash-o fruit_green"></i>&nbsp;
									<i class="am-icon-minus-circle fruit_green"></i>
									<span class="fruit_green">1</span>
									<i class="am-icon-plus-circle fruit_green"></i>
									
								</div>

						</li>
						<li class="am-cf">

								<div class="am-list-item-text am-fl">
									<span id="">商品名称</span>
									<br/>
									<span class="fruit_green" id="">￥10/kg</span>
								</div>
								<div class="am-fr">
									<i class="am-icon-trash-o fruit_green"></i>&nbsp;
									<i class="am-icon-minus-circle fruit_green"></i>
									<span class="fruit_green">1</span>
									<i class="am-icon-plus-circle fruit_green"></i>
									
								</div>

						</li>
					</ul>
				</div>
				<a class="am-btn am-btn-warning am-btn-sm fr-rm10" href="#">
					<i class="am-icon-shopping-cart"></i> 结账
				</a>
				<a class="am-btn am-btn-warning am-btn-sm fr-rm10" href="#">
					<i class="am-icon-trash-o"></i> 清空
				</a>

			</div>
			<ul class="am-navbar-nav am-cf am-avg-sm-4">
				<li>
					<a href="index.html">
						<span class="am-icon-home"></span>
						<span class="am-navbar-label">首页</span>
					</a>
				</li>
				<li>
					<a href="shopcart.html">
						<span class="am-icon-shopping-cart"></span>
						<span class="am-navbar-label">购物车</span>
						<span class="am-badge am-badge-warning am-round fruit_badge">5</span>
					</a>
				</li>
				<li>
					<a href="person-center.html">
						<span class="am-icon-user"></span>
						<span class="am-navbar-label">个人中心</span>
					</a>
				</li>
				<li>
					<a href="message.html">
						<span class="am-icon-comment"></span>
						<span class="am-navbar-label">消息</span>
					</a>
				</li>
			</ul>
		</div>
		<script src="assets/js/jquery.min.js"></script>
		<script src="assets/js/amazeui.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(window).scroll(function() {
					var items = $("#content").find(".item");
					var menu = $("#menu");
					var top = $(document).scrollTop();
					var currentId = ""; //滚动条现在所在位置的item id
					items.each(function() {
						var m = $(this);
						//注意：m.offset().top代表每一个item的顶部位置
						if (top > m.offset().top - 300) {
							currentId = "#" + m.attr("id");
						} else {
							return false;
						}
					});
					var currentLink = menu.find(".current");
					if (currentId && currentLink.attr("href") != currentId) {
						currentLink.removeClass("current");
						menu.find("[href=" + currentId + "]").addClass("current");
					}
				});
				colHeight = document.documentElement.clientHeight - 98;
				document.getElementById("menu").style.height = colHeight + "px";
			});
		</script>
	</body>

</html>